<template>
	<div class="radio-inputs">
		<label class="radio">
			<input name="radio" type="radio" @click="goToPage('/HomePage')" :checked="$route.path === '/HomePage'" />
			<span class="name">选择角色</span>
		</label>
		<label class="radio" v-if="$route.path !== '/ConversationPage'">
			<input name="radio" type="radio" @click="goToPage('/CreationPage')" :checked="$route.path === '/CreationPage'" />
			<span class="name">创建角色</span>
		</label>
		<label class="radio" v-if="$route.path === '/ConversationPage'">
			<input name="radio" type="radio" @click="goToPage('/UpdateCharacter', $route.query.cid,$event)"
				:checked="$route.path === '/UpdateCharacter'" />
			<span class="name">更新角色</span>
		</label>
		<!-- 飘字提示信息 -->
		<MessageBox ref="messageBox" />
	</div>
</template>

<script>
	import MessageBox from '@/components/MessageBox.vue';

	export default {
		components: {
			MessageBox
		},
		props: {
			bPublic: {
				default: false
			}
		},
		methods: {
			goToPage(route, cid, event) {
				console.log('bPublic:', this.bPublic, 'Type:', typeof this.bPublic); // 字符串
				if (this.bPublic === "true" && route === '/UpdateCharacter') {
					this.$refs.messageBox.showMessage('不能更新公共角色', 2000);
					// 阻止默认点击
					event.preventDefault();
				} else {
					this.characterName = this.$route.query.characterName;
					console.log('characterName:', this.characterName);
					this.$router.push({
						path: route,
						query: {
							cid: cid,
							characterName: this.characterName
						}
					});
				}
			}
		}
	}
</script>

<style>
	.radio-inputs {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		border-radius: 4px;
		background-color: #eee;
		box-sizing: border-box;
		padding: 0.25rem;
		width: 400px;
		font-size: 14px;
		height: 46px;
	}

	.radio-inputs .radio {
		flex: 1 1 auto;
		text-align: center;
	}

	.radio-inputs .radio input {
		display: none;
	}

	.radio-inputs .radio .name {
		display: flex;
		cursor: pointer;
		align-items: center;
		justify-content: center;
		border-radius: 4px;
		border: none;
		padding: 0.5rem 0;
		color: rgba(51, 65, 85, 1);
		transition: all 0.15s ease-in-out;
	}

	.radio-inputs .radio input:checked+.name {
		background-color: #fff;
		font-weight: 600;
	}
</style>